<template>
    <div class="container">
        <div>{{ userInfo }}</div> 
        <!-- 直接访问到 store 实例上的getter了 -->
        <div>{{ store.doubleCount }}</div> 
        <div>{{ store.doubleCountPlusOne }}</div>
        <Child></Child>
    </div>
</template>
<script setup>
import { computed, toRefs } from 'vue';
import { useUserStore } from '@/store/user.js';
import Child from './child.vue';
import { storeToRefs } from 'pinia';

const store = useUserStore();

// 如果是直接解构，是会破坏store的响应式的,所以不能够直接解构
// const { userInfo } = store;

// 如果要保持响应式，可以安装如下写法
// 写法一：
// const userInfo = computed(() => store.userInfo);
// 写法二：
// const { userInfo} = storeToRefs(store);
// 写法三：但是这样写js里面访问要通过  .value去拿到它的值
// const { userInfo } = toRefs(store);

const handlerClick = () => {
    // 可以直接通过 strore实例去调用 actions里面的方法
    store.setUserInfo('修改了值'); 
};
</script>